<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link href="slide-unlock.css" rel="stylesheet">
    <style>
        html, body, h1 {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #393939;
            color: #d5d4ff;
            overflow: hidden
        }
        #demo {
            width: 600px;
            margin: 150px auto;
            padding: 10px;
            border: 1px dashed #d5d4ff;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            text-align: left;
        }
    </style>
</head>
<body>
<div class="col-sm-6">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>完整验证表单</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-wrench"></i>
                </a>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <form class="form-horizontal m-t" id="signupForm">
                <div class="form-group">
                    <label class="col-sm-3 control-label">登录账号：</label>
                    <div class="col-sm-8">
                        <input id="firstname" name="firstname" class="form-control" type="text" placeholder="first name">
                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 手机或邮箱信息</span>
                    </div>
                </div>
                <label class="form-group">
                    <label class="col-sm-3 control-label">昵称：</label>
                    <div class="col-sm-8">
                        <input id="lastname" name="lastname" class="form-control" type="text" aria-required="true" aria-invalid="false" class="valid" placeholder="lastname">
                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 至少4个字符 </span>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别：</label>

                        <div class="col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" value="">不公开</label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios">帅哥</label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="option2" id="optionsRadios2" name="optionsRadios">美女</label>
                            </div>
                        </div>
                    </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label">用户名：</label>
                    <div class="col-sm-8">
                        <input id="username" name="username" class="form-control" type="text" placeholder="username" aria-required="true" aria-invalid="true" class="error">
                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请输入你的用户名</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">密码：</label>
                    <div class="col-sm-8">
                        <input id="password" name="password" class="form-control" type="password" placeholder="password">
                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 至少6个字符</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">确认密码：</label>
                    <div class="col-sm-8">
                        <input id="confirm_password" name="confirm_password" class="form-control" type="password" placeholder="password">
                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
                    </div>
                </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">身份证号码：</label>
                        <div class="col-sm-8">
                            <input id="identity-card" name="identity_card" class="form-control" type="password" placeholder="password">
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请输入15~18位的身份证号码</span>
                        </div>
                    </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">E-mail：</label>
                    <div class="col-sm-8">
                        <input id="email" name="email" class="form-control" type="email" placeholder="邮箱地址">
                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请输入邮箱地址</span>
                    </div>
                </div>

                    <div class="form-group">
                        <div class="col-sm-8 col-sm-offset-3">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" class="checkbox" id="agree" name="agree"> 我已经认真阅读并同意《使用协议》
                                </label>
                            </div>
                        </div>
                    </div>

                    <div id="demo">
                        <div id="slider">
                            <div id="slider_bg"></div>
                            <span id="label">>></span> <span id="labelTip">拖动滑块验证</span> </div>
                        <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
                        <script src="slideunlock.js"></script>
                        <script>
                            $(function () {
                                var slider = new SliderUnlock("#slider",{
                                    successLabelTip : "注册成功了，好棒啊，亲！"
                                },function(){
                                    alert("验证成功,即将跳转");
                                    window.location.href="Login.html"
                                });
                                slider.init();
                            })
                        </script>
                    </div>

            </form>
        </div>
    </div>
</div>
</body>
</html>